<template>
	<div class="info">
		<div class="infoCont">
			<div class="infoItems" v-for="(ite,idx) in list" :key="idx" @click='MSGEvent(idx)'>
				<div class="infoItems_left">
					<div class="infoItems_left_img">
						<image :src="ite.img" mode=""></image>
					</div>
					<div class="infoItems_left_cont">
						<div class="infoItems_left_cont_top">
							{{ite.name}}
						</div>
						<div class="infoItems_left_cont_bottom" v-if="ite.num > 0">
							{{ite.cont}}
						</div>
					</div>
				</div>
				<div class="infoItems_right" v-if="ite.num > 0">

				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import tabar from '@/pagesA/components/tabar.vue'
	import pageList from '@/pagesA/components/list.vue'
	export default {
		components: {
			tabar,
			pageList
		},
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					id: 0,
					name: '待我处理'
				}, {
					id: 0,
					name: '我已提交'
				}],
				list: [{
						name: '工单通知',
						img: 'https://wx.sjcmhz.com/static/image/pageA/pagesA1.png',
						cont: '您有新消息！',
						num: 0
					},
					{
						name: '行政/入住通知',
						img: 'https://wx.sjcmhz.com/static/image/pageA/pagesA2.png',
						cont: '您有新消息！',
						num: 0
					},
					{
						name: '回线上/换房',
						img: require('@/static/image/hui.png'),
						cont: '您有新消息！',
						num: 0
					},
					{
						name: '平台通知',
						img: 'https://wx.sjcmhz.com/static/image/pageA/pagesA4.png',
						cont: '您有新消息！',
						num: 0
					},
					{
						name: '工单回访',
						img: 'https://wx.sjcmhz.com/static/image/pageA/pagesA5.png',
						cont: '您有新消息！',
						num: 0
					},
					{
						name: '课程通知',
						img: 'https://wx.sjcmhz.com/static/image/pageA/pagesA3.png',
						cont: '您有新消息！',
						num: 0
					},

				]
			}
		},
		onShow() {
			this.$utils.isLogin()
			this.getMSGInfo()
		},
		methods: {
			// noticeIndex
			async getMSGInfo() {
				const {
					data
				} = await this.$request(this.$Api.noticeIndex, {

				}, "POST")
				if (data.code !== 0) return
				this.list[0].num = data.data.m1
				this.list[1].num = data.data.m2
				this.list[2].num = data.data.m6
				this.list[3].num = data.data.m3
				this.list[4].num = data.data.m4
				this.list[5].num = data.data.m5
			},
			MSGEvent(idx) {
				switch (idx) {
					case 0:
						uni.navigateTo({
							url: "/pages/info/gdMSG"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/info/yaoyue"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/info/huiXian"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/info/gonggao"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/info/huifang"
						})
						break;
					case 5:
						uni.navigateTo({
							url: "/pages/info/kecheng"
						})
						break;
				}

			},

			tabEvent(idx) {
				this.tabIndex = idx
			}
		}
	}
</script>

<style lang="less">
	.info {
		background: #fff;
		// min-height: 100vh;

		.infoCont {
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;

			.infoItems {
				width: 100%;
				height: 170rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #DDDDDD;
				position: relative;

				.infoItems_left {
					display: flex;
					align-items: center;

					.infoItems_left_img {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.infoItems_left_cont {
					font-size: 32rpx;
					color: #333;
					margin-left: 36rpx;

					.infoItems_left_cont_bottom {
						margin-top: 18rpx;
						color: #999999;

					}

				}

				.infoItems_right {
					background: #D0021B;
					width: 22rpx;
					height: 22rpx;
					border-radius: 50%;
					position: absolute;
					right: 0rpx;
					top: 30rpx;
				}

			}

			.infoItems:last-child {
				border: none;
			}
		}
	}
</style>